<template>
  <div :class="ns.b()">
    <header :class="ns.e('header')" @click="handleBack">
      <img :src="back" :class="ns.em('header', 'icon')" />
      <span :src="back" :class="ns.em('header', 'title')">收银台</span>
    </header>
  </div>
</template>

<script setup lang="ts">
// hooks
import { useNamespace } from '../../../shared/index'

import back from '@/assets/images/back.png'

// cssNamespace
const ns = useNamespace('m-cashiering-header-box')

const emit = defineEmits<{
  (e: 'onBack'): void
}>()

const handleBack = () => {
  emit('onBack')
}
</script>

<style scoped lang="scss">
.kc-m-cashiering-header-box {
  height: 80px;
  &__header {
    position: fixed;
    top: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 80px;
    background: #fff;
    width: 750px;

    &--icon {
      position: absolute;
      left: 32px;
      width: 48px;
      height: 48px;
    }
    &--title {
      font-size: 36px;
      font-weight: 500;
    }
  }
}
</style>
